<template>
  <div class="relevant-page">
    <!-- <div class="panel-main"> -->
      <!-- <div class="btn-group">
        <button v-for="(item, index) in btnOption" :key="index" @click="changeBtn(index)" :class="{'active': btnActive === index}">{{item}}</button>
      </div> -->
      <!-- 相关专利 -->
      <relevantList v-show="btnActive===0" :publicInfo="publicInfo" />
      <!-- 潜在新颖专利 -->
      <!-- <potential v-show="btnActive===1" :publicInfo="publicInfo" /> -->
    <!-- </div> -->
  </div>
</template>

<script>
import RelevantList from './RelevantList'
import Potential from './Potential'
export default {
  props: {
    publicInfo: {
      type: Object
    }
  },
  components: {
    RelevantList,
    Potential
  },
  data() {
    return {
      btnActive: 0,
      btnOption: ['相关专利', '潜在新颖专利']
    }
  },
  methods: {
    changeBtn(index) {
      this.btnActive = index
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.relevant-page {
  display: flex;
  max-height: 100%;
  overflow-y: auto;
  // margin-top: 20px;
  .panel-main {
    flex: 1;
    .btn-group {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding-left: 20px;
      padding-bottom: 20px;
      button {
        height: 40px;
        padding: 0 30px;
        border: 1px solid $color141;
        border-radius: 3px;
        margin-right: 20px;
        font-size: 12px;
        color: $mainColor;
        cursor: pointer;
        &.active {
          border-color: $mainColor;
          color: $color51;
          background-color: $mainColor;
          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
  }
}

</style>